'use strict';
import React from "react";
import {
    StyleSheet,
    TextInput,
    TextInputComponent,
    TouchableOpacity,
    TouchableOpacityComponent,
    View
} from "react-native";
import Container from "../../component/common/Container";
import ImageView from "../../component/common/ImageView";
import ServicesApi from "../../config/ServicesApi";
import ListView from "../../component/list/ListView";
import CommonListRow from "../../component/home/CommonListRow";
import SpinnerLoading from "../../component/common/SpinnerLoading";
import {HorizontalLine} from "../../component/common/CommonLine";

class SearchPage extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            searchText: '',
            data: [],
            firstLoad: true,
        };
        this.page = 1;
        this.limit = 10;
    }

    componentDidMount() {
        // this.requestDataSource();
    }

    requestDataSource = async () => {
        if (!this.state.searchText) {
            ToastManager.show('搜索内容不能为空!');
            return;
        }
        const data = {
            search_key: this.state.searchText,
            page: this.page,
            limit: this.limit,
            audit_status: 'through',
        };
        const result = await Services.post(ServicesApi.INFORMATION_QUERY, data);
        // console.log('搜索返回------------->', result);
        if (result.code === StatusCode.SUCCESS_CODE) {
            let dataSource = [];
            if (Array.isArray(result.data)) {
                if (data.page === 1) {
                    dataSource = result.data;
                } else {
                    let temp = this.state.data;
                    dataSource = temp.concat(result.data);

                }
            }
            this.setState({data: dataSource})
        } else {
            ToastManager.show(result.dec || 'error');
        }
        this.setState({
            ready: true,
            firstLoad: false,
        });
        this._listRef && this._listRef.stopRefresh();
        this._listRef && this._listRef.stopEndReached({allLoad: result.data.length < this.limit}); // 是否加载完毕需要自行判断
    };

    _onChangeText = (text) => {
        this.setState({searchText: text});
    };

    renderSearchView = () => {
        return (
            <View style={styles.contView}>
                <TouchableOpacity onPress={() => {
                    RouterHelper.goBack()
                }}>
                    <ImageView
                        source={Images.icon_back}
                        style={styles.backIcon}
                    />
                </TouchableOpacity>

                <View style={styles.headView}>
                    <TextInput
                        style={styles.searchInput}
                        placeholder={'请输入搜索内容'}
                        onChangeText={this._onChangeText}
                        returnKeyType={'search'}
                        onSubmitEditing={this.requestDataSource}
                    />
                    <TouchableOpacity
                        onPress={() => this.requestDataSource()}
                    >
                        <ImageView
                            style={styles.searchIcon}
                            source={Images.icon_search_home}
                        />
                    </TouchableOpacity>

                </View>
            </View>
        )
    };

    _onPressItem = (item, index) => {
        RouterHelper.navigate('', 'ArticleDetails', {information_id: item.information_id});
    };

    _renderItem = (info) => {
        const {item, index} = info;
        return (
            <CommonListRow
                {...item}
                dic_code={''}
                onPress={() => this._onPressItem(item, index)}
            />
        )
    };

    _onRefresh = () => {
        this.page = 1;
        this.requestDataSource();
    };

    _onEndReached = () => {
        this.page++;
        this.requestDataSource();
    };

    _captureRef = (v) => {
        this._listRef = v
    };

    _keyExtractor = (item, index) => {
        return `${index}`
    };

    _renderItemSeparator = () => {
        return (
            <HorizontalLine style={styles.sep} />
        )
    };

    render() {
        let {ready, firstLoad} = this.state;
        return (
            <Container>
                <this.renderSearchView/>
                {!firstLoad ?
                    (ready ?
                        <ListView
                            data={this.state.data}
                            initialRefresh={false}
                            enableRefresh={true}
                            enableLoadMore={true}
                            ref={this._captureRef}
                            onRefresh={this._onRefresh}
                            renderItem={this._renderItem}
                            keyExtractor={this._keyExtractor}
                            onEndReached={this._onEndReached}
                            ItemSeparatorComponent={this._renderItemSeparator}
                        />
                        : <SpinnerLoading/>
                    )
                    : null
                }
            </Container>
        );
    }
}

const styles = StyleSheet.create({
    contView: {
        flexDirection: 'row',
        alignItems: 'center',
        marginHorizontal: 15,
        marginTop: Theme.statusBarHeight + 5,
    },
    headView: {
        borderRadius: 15,
        backgroundColor: "#ececec",
        marginLeft: 29,
        paddingHorizontal: 15,
        flexDirection: 'row',
        alignItems: 'center',
        paddingVertical: 7,
        flex: 1,
    },
    searchInput: {
        flex: 1,
        padding: 0,
        color: '#333',
        marginRight: 15,
    },
    searchIcon: {
        width: 16,
        height: 16,
    },
    backIcon: {
        width: 21,
        height: 21,
    },
    sep: {
        margin: 10,
        backgroundColor: '#dbdbdb',
    },
});

export default SearchPage